一、功能流程分析
二、代码
1.view层
1）login.jsp
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 3 4 5 6 7 8 9登录 10 11 12 13 14 15 16 17 20 21 22 23 24 30 31 32 33 94 95 96
2)login.js
1 $(function() { 2 /* 3 * 1. 让登录按钮在得到和失去焦点时切换图片 4 */ 5 $("#submit").hover( 6 function() { 7 $("#submit").attr("src", "/goods/images/login2.jpg"); 8 }, 9 function() { 10 $("#submit").attr("src", "/goods/images/login1.jpg"); 11 } 12 ); 13 14 /* 15 * 2. 给注册按钮添加submit()事件，完成表单校验 16 */ 17 $("#loginForm").submit(function(){ 18 $("#msg").text(""); 19 var bool = true; 20 $(".input").each(function() { 21 var inputName = $(this).attr("name"); 22 if(!invokeValidateFunction(inputName)) { 23 bool = false; 24 } 25 }); 26 return bool; 27 }); 28 29 /* 30 * 3. 输入框得到焦点时隐藏错误信息 31 */ 32 $(".input").focus(function() { 33 var inputName = $(this).attr("name"); 34 $("#" + inputName + "Error").css("display", "none"); 35 }); 36 37 /* 38 * 4. 输入框推动焦点时进行校验 39 */ 40 $(".input").blur(function() { 41 var inputName = $(this).attr("name"); 42 invokeValidateFunction(inputName); 43 }) 44 }); 45 46 /* 47 * 输入input名称，调用对应的validate方法。 48 * 例如input名称为：loginname，那么调用validateLoginname()方法。 49 */ 50 function invokeValidateFunction(inputName) { 51 inputName = inputName.substring(0, 1).toUpperCase() + inputName.substring(1); 52 var functionName = "validate" + inputName; 53 return eval(functionName + "()"); 54 } 55 56 /* 57 * 校验登录名 58 */ 59 function validateLoginname() { 60 var bool = true; 61 $("#loginnameError").css("display", "none"); 62 var value = $("#loginname").val(); 63 if(!value) { // 非空校验 64 $("#loginnameError").css("display", ""); 65 $("#loginnameError").text("用户名不能为空！"); 66 bool = false; 67 } else if(value.length < 3 || value.length > 20) { //长度校验 68 $("#loginnameError").css("display", ""); 69 $("#loginnameError").text("用户名长度必须在3 ~ 20之间！"); 70 bool = false; 71 } 72 return bool; 73 } 74 75 /* 76 * 校验密码 77 */ 78 function validateLoginpass() { 79 var bool = true; 80 $("#loginpassError").css("display", "none"); 81 var value = $("#loginpass").val(); 82 if(!value) { // 非空校验 83 $("#loginpassError").css("display", ""); 84 $("#loginpassError").text("密码不能为空！"); 85 bool = false; 86 } else if(value.length < 3 || value.length > 20) { //长度校验 87 $("#loginpassError").css("display", ""); 88 $("#loginpassError").text("密码长度必须在3 ~ 20之间！"); 89 bool = false; 90 } 91 return bool; 92 } 93 94 /* 95 * 校验验证码 96 */ 97 function validateVerifyCode() { 98 var bool = true; 99 $("#verifyCodeError").css("display", "none");100 var value = $("#verifyCode").val();101 if(!value) { //非空校验102 $("#verifyCodeError").css("display", "");103 $("#verifyCodeError").text("验证码不能为空！");104 bool = false;105 } else if(value.length != 4) { //长度不为4就是错误的106 $("#verifyCodeError").css("display", "");107 $("#verifyCodeError").text("错误的验证码！");108 bool = false;109 } else { //验证码是否正确110 $.ajax({111 cache: false,112 async: false,113 type: "POST",114 dataType: "json",115 data: {method: "validateVerifyCode", verifyCode: value},116 url: "/goods/UserServlet",117 success: function(flag) {118 if(!flag) {119 $("#verifyCodeError").css("display", "");120 $("#verifyCodeError").text("错误的验证码！");121 bool = false; 122 }123 }124 });125 }126 return bool;127 }
2.servlet层
1)UserServlet.java
1 public String login(HttpServletRequest request, HttpServletResponse response) throws IOException { 2 /* 3 * 1. 封装表单数据到User 4 * 2. 校验表单数据 5 * 3. 使用service查询，得到User 6 * 4. 查看用户是否存在，如果不存在： 7 * * 保存错误信息：用户名或密码错误 8 * * 保存用户数据：为了回显 9 * * 转发到login.jsp10 * 5. 如果存在，查看状态，如果状态为false：11 * * 保存错误信息：您没有激活12 * * 保存表单数据：为了回显13 * * 转发到login.jsp14 * 6. 登录成功：15 * * 保存当前查询出的user到session中16 * * 保存当前用户的名称到cookie中，注意中文需要编码处理。17 */18 19 // 1. 封装表单数据到user20 User formUser = CommonUtils.toBean(request.getParameterMap(), User.class);21 22 // 2. 校验23 Map errors = validateLogin(formUser, request.getSession());24 if(errors.size() > 0) {25 request.setAttribute("errors", errors);26 request.setAttribute("user", formUser);27 return "f:/jsps/user/login.jsp";28 }29 30 // 3. 调用userService#login()方法31 User user = userService.login(formUser);32 33 // 4. 开始判断34 if(user == null) {35 request.setAttribute("msg", "用户名或密码错误！");36 request.setAttribute("user", formUser);37 return "f:/jsps/user/login.jsp";38 }39 if(!user.isStatus()) {40 request.setAttribute("msg", "您还没有激活！");41 request.setAttribute("user", formUser);42 return "f:/jsps/user/login.jsp"; 43 }44 // 保存用户到session45 request.getSession().setAttribute("sessionUser", user);46 // 获取用户名保存到cookie中47 String loginname = URLEncoder.encode(user.getLoginname(), "utf-8");48 Cookie cookie = new Cookie("loginname", loginname);49 cookie.setMaxAge(24 * 60 * 60 * 10);//保存10天50 response.addCookie(cookie);51 return "r:/index.jsp";52 }53 54 /**55 * 登录校验方法，内容待完成56 * @param formUser57 * @param session58 * @return59 */60 private Map validateLogin(User formUser, HttpSession session) {61 Map errors = new HashMap ();62 // 1. 校验登录名63 String loginname = formUser.getLoginname();64 if(loginname == null || loginname.trim().isEmpty()) {65 errors.put("loginname", "用户名不能为空！");66 } else if(loginname.length() < 3 || loginname.length() > 20) {67 errors.put("loginname", "用户名长度必须在3~20之间！");68 } 69 70 // 2. 校验登录密码71 String loginpass = formUser.getLoginpass();72 if(loginpass == null || loginpass.trim().isEmpty()) 73 errors.put("loginpass", "密码不能为空！");74 else if(loginpass.length() < 3 || loginpass.length() > 20)75 errors.put("loginpass", "密码长度必须在3~20之间！");76 77 // 3. 验证码校验78 String verifyCode = formUser.getVerifyCode();79 String vCode = (String) session.getAttribute("vCode");80 if(verifyCode == null || verifyCode.trim().isEmpty()) {81 errors.put("verifyCode", "验证码不能为空！");82 } else if(!verifyCode.equalsIgnoreCase(vCode)) {83 errors.put("verifyCode", "验证码错误！");84 }85 86 return errors;87 }
3.service层
1)userService.java
1 /** 2 * 登录功能 3 * @param user 4 * @return 5 */ 6 public User login(User user) { 7 try { 8 return userDao.findByLoginnameAndLoginpass(user.getLoginname(), user.getLoginpass()); 9 } catch (SQLException e) {10 throw new RuntimeException(e);11 }12 }
4.dao层
1)UserDao.java
1 /** 2 * 按用户名和密码查询 3 * @param loginname 4 * @param loginpass 5 * @return 6 * @throws SQLException 7 */ 8 public User findByLoginnameAndLoginpass(String loginname, String loginpass) throws SQLException { 9 String sql = "select * from t_user where loginname=? and loginpass=?";10 return qr.query(sql, new BeanHandler (User.class), loginname, loginpass);11 }